<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    // 请写出实现的代码：
    // 提示：基本原理是改变列表容器的left值，根据点击的tab动画运动到对应的left值
	$(function(){
	
		$('.tab_btns input').mouseenter(function(){
		
			$(this).addClass("current").siblings()
			.removeClass("current");
			$(".tab_cons").stop().animate({"left":-$(this).index()*500});})
			})
//	
//		$('.tab_btns input').click(function(){
//				
//          $(this).addClass('current').siblings().removeClass('current');
//          $('.tab_cons').animate({'left':-$(this).index()*500});
//      
//          })})

//			$(".current").click(function(){
//			$(".current").css({
//				"background":"#FFC300"
//			});
//			$(".current1").css({
//				"background":"#ddd"
//			});	
//			$(".current2").css({
//				"background":"#ddd"
//			});
//			$(".tab_cons").animate({
//				"left":"0px"
//			},100)
//		})
//		$(".current1").click(function(){
//			$(".current").css({
//				"background":"#ddd"
//			});
//			$(".current1").css({
//				"background":"#FFC300"
//			});	
//			$(".current2").css({
//				"background":"#ddd"
//			});
//			$(".tab_cons").animate({
//				"left":"-500px"
//			},100)
//		})
//		$(".current2").click(function(){
//			$(".current").css({
//				"background":"#ddd"
//			});
//			$(".current1").css({
//				"background":"#ddd"
//			});
//			$(".current2").css({
//				"background":"#FFC300"
//			});
//			$(".tab_cons").animate({
//				"left":"-1000px"
//			},100)
//		})
//	})
    </script>
</head>
<body>
    <div class="tab_wrap">
        <div class="tab_btns">
            <input type="button" value="公司新闻" class="current">
            <input type="button" value="国际新闻" class="current1">
            <input type="button" value="行业动态" class="current2">
        </div>
        <div class="tab_cons">
            <ul>
                <li><a href="#">公司新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
             <ul>
                <li><a href="#">国际新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
             <ul>
                <li><a href="#">行业动态G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li>
                <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li>
                <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li>
                <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li>
                <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li>
                <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li>
            </ul>
        </div>
    </div>
</body>
</html>